<template>
  <el-steps :active="activeNode" align-center>
    <el-step v-for="(value, key) in processList"
             :key="key"
             :title="value.nodeName"
    >
      <template slot="description">
        <span>{{ value.handler }}<br/>{{ value.handleTime }}</span>
      </template>
    </el-step>
  </el-steps>
</template>

<script>
import { getByBusinessId } from '@/api/activiti/detail'
import { getByBusinessKey } from '@/api/activiti/configure'

export default {
  name: 'ApprovalProcessScheduleChart',
  props: {
    businessId: {
      required: false,
      type: Number,
      default: -1
    },
    //原 businessKey，为了与工作流业务主键businessKey区别，改名2021-10-15 09:56
    moduleKey: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      // 流程列表
      processList: [],
      processConfigureList: [],
      processDetailList: [],
      activeNode: 0
    }
  },
  created() {
    this.init()
  },
  mounted() {

  },
  watch: {
    businessId(newValue, oldValue) {
      this.init();
    }
  },
  methods: {
    // 初始化方法
    init() {
      const _this = this
      getByBusinessKey(_this.moduleKey).then(res => {
        if (res && res.code === 200) {
          _this.processConfigureList = res.data
          this.reload()
        }
      })
    },
    //重新加载
    async reload() {
      const _this = this
      if (_this.businessId) {
        await getByBusinessId(_this.businessId).then(res => {
          if (res && res.code === 200) {
            _this.processDetailList = res.data
          }
        })
      }

      // 组装进度图显示数据
      _this.processList = []
      _this.activeNode = 0
      _this.processConfigureList.forEach(configure => {
        let process = {
          configure: '',
          handler: '',
          handleTime: ''
        }
        process.nodeName = configure.nodeName
        _this.processDetailList.forEach(detail => {
          if (detail.configure && configure.id === detail.configure.id) {
            process.configure = detail.configure
            process.handler = detail.handler
            process.handleTime = detail.handleTime
            _this.activeNode += 1
          }
        })
        _this.processList.push(process)
      })

      // 删除未走过的中间节点
      _this.processList.reverse()
      let unfinished = false
      _this.processList.forEach(process => {
        let hasHandler = !process.handler
        if (unfinished) {
          process.deleted = hasHandler;
        } else {
          process.deleted = false
          if (!hasHandler) {
            unfinished = true
          }
        }
      })
      _this.processList = _this.processList.filter(item => !item.deleted)
      _this.processList.reverse()
    }

  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 24px;

  .card-head-title {
    display: inline-block;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 16px;
  }

  .card-body {
    padding: 12px 14px;

    .tag-text {
      margin-left: 8px;
    }

    .confirm-btn-group {
      display: flex;
      flex-direction: row-reverse;

      .confirm-btn-system {
        margin-right: 14px
      }
    }
  }
}
</style>
